import { useEffect } from "react";
import { Table, DatePicker, Button, Space, Card } from "antd";
import useAuthButtons from "@/hooks/useAuthButtons";

const UseHooks = () => {
	// 使用自定义 Hook 获取按钮权限
	const { BUTTONS } = useAuthButtons();
	const { RangePicker } = DatePicker;

	useEffect(() => {
		console.log("权限按钮:", BUTTONS);
	}, []);

	const dataSource = [
		{
			key: "1",
			name: "胡彦斌",
			age: 32,
			address: "西湖区湖底公园1号"
		},
		{
			key: "2",
			name: "胡彦祖",
			age: 42,
			address: "西湖区湖底公园1号"
		},
		{
			key: "3",
			name: "刘彦祖",
			age: 18,
			address: "西湖区湖底公园1号"
		},
		{
			key: "4",
			name: "刘彦祖",
			age: 18,
			address: "翻斗大街翻斗花园二号楼1001室"
		},
		{
			key: "5",
			name: "刘彦祖",
			age: 18,
			address: "翻斗大街翻斗花园二号楼1001室"
		}
	];

	const columns: any[] = [
		{
			title: "姓名",
			dataIndex: "name",
			key: "name",
			align: "center"
		},
		{
			title: "年龄",
			dataIndex: "age",
			key: "age",
			align: "center"
		},
		{
			title: "住址",
			dataIndex: "address",
			key: "address",
			align: "center"
		},
		{
			title: "住址",
			dataIndex: "address",
			key: "address",
			align: "center"
		}
	];

	return (
		<div className="card content-box">
			<h2>UseHooks - 现代 Hooks 开发方式</h2>

			{/* 权限控制示例 */}
			<Card title="权限控制 Demo" style={{ marginBottom: 16 }}>
				<div className="mb-20px">
					<span>切换国际化的时候看我 😎 ：</span>
					<RangePicker />
				</div>
				<div className="mb-20px">
					<Space>
						{BUTTONS.add && <Button type="primary">我是 Admin && User 能看到的按钮</Button>}
						{BUTTONS.delete && <Button type="primary">我是 Admin 能看到的按钮</Button>}
						{BUTTONS.edit && <Button type="primary">我是 User 能看到的按钮</Button>}
					</Space>
				</div>
			</Card>

			{/* 数据表格示例 */}
			<Card title="数据表格 Demo" style={{ marginBottom: 16 }}>
				<Table bordered={true} dataSource={dataSource} columns={columns} />
			</Card>

			{/* 说明文字 */}
			<Card title="开发方式说明">
				<div style={{ color: "#666" }}>
					<p>
						<strong>现代 Hooks 特点:</strong>
					</p>
					<ul>
						<li>✅ 使用自定义 Hooks 封装逻辑</li>
						<li>✅ 权限控制通过 Hook 管理</li>
						<li>✅ 逻辑复用性强</li>
						<li>✅ 组件更简洁，关注点分离</li>
						<li>✅ 适合复杂的状态管理和业务逻辑</li>
					</ul>
					<p>
						<strong>适用场景:</strong> 复杂的业务组件，需要权限控制、数据管理等
					</p>
					<p>
						<strong>优势:</strong> 逻辑可复用、测试友好、维护性强
					</p>
				</div>
			</Card>
		</div>
	);
};

export default UseHooks;
